
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zxx">

<head>
	<title>眼镜电子商务城</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<meta name="keywords" content="Goggles a Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
	<link href="css/login_overlay.css" rel='stylesheet' type='text/css' />
	<link href="css/style6.css" rel='stylesheet' type='text/css' />
	<link rel="stylesheet" href="css/shop.css" type="text/css" />
	<link rel="stylesheet" type="text/css" href="css/checkout.css">
	<link href="css/easy-responsive-tabs.css" rel='stylesheet' type='text/css' />
	<link href="css/style.css" rel='stylesheet' type='text/css' />
	<link href="css/fontawesome-all.css" rel="stylesheet">
</head>

<body>
	<div class="banner-top container-fluid" id="home">
		<!-- header -->
		<header>
			<div class="row">
				<div class="col-md-3 top-info text-left mt-lg-4">
					<h6>客服热线</h6>
					<ul>
						<li>
							<i class="fas fa-phone"></i>请拨</li>
						<li class="number-phone mt-3">12345678099</li>
					</ul>
				</div>
				<div class="col-md-6 logo-w3layouts text-center">
					<h1 class="logo-w3layouts">
						<a class="navbar-brand" href="index.jsp">
							眼镜商城 </a>
					</h1>
				</div>

				<div class="col-md-3 top-info-cart text-right mt-lg-4">
					<ul class="cart-inner-info">
						<li class="button-log">
							<a class="btn-open" href="#">
								<span class="fa fa-user" aria-hidden="true"></span>
							</a>
						</li>
						<li class="galssescart galssescart2 cart cart box_1">
							<form action="#" method="post" class="last">
								<input type="hidden" name="cmd" value="_cart">
								<input type="hidden" name="display" value="1">
								<button class="top_googles_cart" type="submit" name="submit" value="">
									<a href="checkout.jsp">我的购物车</a>
								</button>
							</form>
						</li>
					</ul>
					<!---->
					<div class="overlay-login text-left">
						<button type="button" class="overlay-close1">
							<i class="fa fa-times" aria-hidden="true"></i>
						</button>
						<div class="wrap">
							<c:if test="${empty user}">
								<div class="rightBox" id="loginBox">
									<h5 class="text-center mb-4">登录</h5>
									<div class="login p-5 bg-dark mx-auto mw-100">
										<div class="form-group">
											<span class="colDark">用户名：</span><input id="username" name="username" type="text"><em></em>
											<small id="emailHelp" class="form-text text-muted">我们永远不会将您的信息泄露给任何人</small>
										</div>
										<div class="form-group">
											<span class="colDark">密码：</span><input id="password" name="password" type="password"><em></em>
										</div>
										<button onclick="login()">登录</button>
										<p class="textRight">还没注册？<a href="javascript:void(0);" onclick="changeshow('registerBox','loginBox')" class="colMint">马上注册</a>　</p>
										<p class="colWarning textCenter"></p>
									</div>
									<!---->
								</div>
								
								<div class="rightBox" id="registerBox" style="display:none">
									<h5 class="text-center mb-4">注册</h5>
									<div class="login p-5 bg-dark mx-auto mw-100">
										<div class="form-group">
											<span class="colDark">用户名：</span><input id="runame" name="username" type="text"><em></em>
											<small id="emailHelp" class="form-text text-muted">我们永远不会将您的信息泄露给任何人</small>
										</div>
										<div class="form-group">
											<span class="colDark">密码：</span><input id="rpwd" name="password" type="password"><em></em>
										</div>
										<div class="form-group">
											<span class="colDark">确认：</span><input id="repwd" name="repassword" type="password"><em></em>
										</div>
										<button onclick="reg()">立即注册</button>
										<p class="textRight">已有账号？<a href="javascript:void(0);" onclick="changeshow('loginBox','registerBox')" class="colMint">马上登录</a>　</p>
			            					<p class="colWarning textCenter"></p>
									</div>
									<!---->
								</div>
							</c:if>
							<!-- session里面有这个值，我们就显示这一块 -->
					        <c:if test="${not empty user}">
						        	<div class="rightBox" id="userInfo">
						            <div class="title"><span>用户信息</span></div>
						            	<c:if test="${user.status==0}">
						            		<p class="userName"><span class="colDark">尊敬的用户：${user.nickname }，您好</span></p>
						            	</c:if>
						            <c:if test="${user.status==1}">
						            		<p class="adminInfo">
							            		<span class="colDanger">您好，管理员：${user.nickname }</span>
							            		<a href="back/index.jsp">进入管理界面</a>
							            </p>
						            	</c:if>
						            <p><span class="colDanger">欢迎光临我的眼镜店！</span></p>
						            <p><span class="colDark"><a href="user_center_info.jsp">个人中心</a></span></p>
						            <p><span class="colDark"><a href="javascript:void(0);" id="logout">退出</a></span></p>
						        </div>
					        </c:if>
							
						</div>
					</div>
					<!---->
				</div>
			</div>
			<div class="search">
				<div class="mobile-nav-button">
					<button id="trigger-overlay" type="button">
						<i class="fas fa-search"></i>
					</button>
				</div>
				<!-- open/close -->
				<div class="overlay overlay-door">
					<button type="button" class="overlay-close">
						<i class="fa fa-times" aria-hidden="true"></i>
					</button>
					<form action="#" method="post" class="d-flex">
						<input class="form-control" type="search" placeholder="Search here..." required="">
						<button type="submit" class="btn btn-primary submit">
							<i class="fas fa-search"></i>
						</button>
					</form>

				</div>
				<!-- open/close -->
			</div>
			<label class="top-log mx-auto"></label>
			<nav class="navbar navbar-expand-lg navbar-light bg-light top-header mb-2">

				<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
				    aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						
					</span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav nav-mega mx-auto">
						<li class="nav-item">
							<a class="nav-link ml-lg-0" href="index.jsp">主页
								<span class="sr-only">(current)</span>
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="about.jsp">关于我们</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
							    aria-expanded="false">
								特征
							</a>
							<ul class="dropdown-menu mega-menu ">
								<li>
									<div class="row">
										<div class="col-md-4 media-list span4 text-left">
											<h5 class="tittle-w3layouts-sub"> 特征</h5>
											<ul>
												<li class="media-mini mt-3">
													<a href="shop.jsp">设计师眼镜</a>
												</li>
												<li class="">
													<a href="shop.jsp">雷朋</a>
												</li>
												<li>
													<a href="shop.jsp">处方眼镜</a>
												</li>
												<li class="mt-3">
													<h5>查看更多页面</h5>
												</li>
												<li class="mt-2">
													<a href="about.jsp">关于</a>
												</li>
												<li>
													<a href="customer.jsp">顾客</a>
												</li>
											</ul>
										</div>
										<div class="col-md-4 media-list span4 text-left">
											<h5 class="tittle-w3layouts-sub">样图 </h5>
											<div class="media-mini mt-3">
												<a href="shop.jsp">
													<img src="images/g2.jpg" class="img-fluid" alt="">
												</a>
											</div>
										</div>
										<div class="col-md-4 media-list span4 text-left">
											<h5 class="tittle-w3layouts-sub">样图 </h5>
											<div class="media-mini mt-3">
												<a href="shop.jsp">
													<img src="images/g3.jpg" class="img-fluid" alt="">
												</a>
											</div>

										</div>
									</div>
									<hr>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true"
							    aria-expanded="false">
								店铺
							</a>
							<ul class="dropdown-menu mega-menu ">
								<li>
									<div class="row">
										<div class="col-md-4 media-list span4 text-left">
											<h5 class="tittle-w3layouts-sub"> 类型</h5>
											<ul>
												<li class="media-mini mt-3">
													<a href="shop.jsp">设计师眼镜</a>
												</li>
												<li class="">
													<a href="shop.jsp">雷朋</a>
												</li>
												<li>
													<a href="shop.jsp">处方眼镜</a>
												</li>
												<li>
													<a href="shop.jsp">Rx 太阳镜</a>
												</li>
												<li>
													<a href="shop.jsp">隐形眼镜</a>
												</li>
												<li>
													<a href="shop.jsp">多焦点眼镜</a>
												</li>
												<li>
													<a href="shop.jsp">儿童眼镜</a>
												</li>
												<li>
													<a href="shop.jsp">轻巧眼镜</a>
												</li>
												<li>
													<a href="shop.jsp">运动眼镜</a>
												</li>
											</ul>
										</div>
										<div class="col-md-4 media-list span4 text-left">
											<h5 class="tittle-w3layouts-sub"> 品牌</h5>
											<ul>
												<li class="media-mini mt-3">

													<a href="shop.jsp">布鲁克斯兄弟</a>
												</li>
												<li>
													<a href="shop.jsp">佩索尔</a>
												</li>
												<li>
													<a href="shop.jsp">马球拉尔夫劳伦</a>
												</li>
												<li>
													<a href="shop.jsp">普拉达</a>
												</li>
												<li>
													<a href="shop.jsp">小雷班</a>
												</li>
												<li>
													<a href="shop.jsp">Sferoflex</a>
												</li>
											

												<li>
													<a href="shop.jsp">Polo Ralph Lauren</a>
												</li>
												<li>
													<a href="shop.jsp">Prada</a>
												</li>
												<li>
													<a href="shop.jsp">Ray-Ban Jr</a>
												</li>
											</ul>

										</div>
										<div class="col-md-4 media-list span4 text-left">

											<h5 class="tittle-w3layouts-sub-nav">样图 </h5>
											<div class="media-mini mt-3">
												<a href="shop.jsp">
													<img src="images/g1.jpg" class="img-fluid" alt="">
												</a>
											</div>

										</div>
									</div>
									<hr>
								</li>
							</ul>


						</li>
						<li class="nav-item">
							<a class="nav-link" href="contact.jsp">联系我们</a>
						</li>

					</ul>

				</div>
			</nav>
		</header>
		<!-- banner -->
		<div class="banner_inner">
			<div class="services-breadcrumb">
				<div class="inner_breadcrumb">

					<ul class="short">
						<li>
							<a href="index.jsp">主页</a>
							<i>|</i>
						</li>
						<li>查看</li>
					</ul>
				</div>
			</div>

		</div>
		<!--//banner -->
	</div>
	<!--// header_top -->
	<!--checkout-->
	<section class="banner-bottom-wthreelayouts py-lg-5 py-3">
		<div class="container">
			<div class="inner-sec-shop px-lg-4 px-3">
				<h3 class="tittle-w3layouts my-lg-4 mt-3">查看 </h3>
				<div class="checkout-right">
					<div class="total_count">您的购物车包含:
						<b class="total_count" id="nums"></b>件产品
					</div>
					<table class="timetable_sub">
						<thead>
							<tr>
								<th>编号.</th>
								<th>产品</th>
								<th>数量</th>
								<th>产品名称</th>

								<th>价格</th>
								<th>小计</th>
								<th>删除</th>
							</tr>
						</thead>
						<tbody id="goods">
						
						</tbody>
					</table>
				</div>
				<div class="checkout-left row">
					<div class="col-md-4 checkout-left-basket">
						<h4>产品总计</h4>
						<ul id="product">
						
						</ul>
					</div>
					<!-- 付款 -->
					<div class="col-md-8 address_form">
						<div class="checkout-right-basket">
							<c:if test="${empty user}">
								<a href="index.jsp" onClick="return confirm('请先登录');">付款 </a>
							</c:if>
							<!-- 有值 付款 -->
							<c:if test="${not empty user}">
								<a href="payment.jsp">付款 </a>
							</c:if>
						</div>
					</div>
					
				</div>

					<div class="clearfix"> </div>

				</div>

			</div>

		</div>
	</section>
	<!--//checkout-->
	<!--footer -->
	<footer class="py-lg-5 py-3">
		<div class="container-fluid px-lg-5 px-3">
			<div class="row footer-top-w3layouts">
				<div class="col-lg-3 footer-grid-w3ls">
					<div class="footer-title">
						<h3>关于我们</h3>
					</div>
					<div class="footer-text">
						<p>我们是国内首家也是仅此一家专业为用户服务的眼镜商城，欢迎各位进店或者在商城进行购物</p>
						<ul class="footer-social text-left mt-lg-4 mt-3">

							<li class="mx-2">
								<a href="#">
									<span class="fab fa-facebook-f"></span>
								</a>
							</li>
							<li class="mx-2">
								<a href="#">
									<span class="fab fa-twitter"></span>
								</a>
							</li>
							<li class="mx-2">
								<a href="#">
									<span class="fab fa-google-plus-g"></span>
								</a>
							</li>
							<li class="mx-2">
								<a href="#">
									<span class="fab fa-linkedin-in"></span>
								</a>
							</li>
							<li class="mx-2">
								<a href="#">
									<span class="fas fa-rss"></span>
								</a>
							</li>
							<li class="mx-2">
								<a href="#">
									<span class="fab fa-vk"></span>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-lg-3 footer-grid-w3ls">
					<div class="footer-title">
						<h3>联系方式</h3>
					</div>
					<div class="contact-info">
						<h4>位置 :</h4>
						<p>湖南省衡阳市蒸湘区呆鹰岭镇鸡窝山.</p>
						<div class="phone">
							<h4>联系 :</h4>
							<p>电话 : +121 098 8907 9987</p>
							<p>电子邮件 :
								<a href="mailto:info@example.com">info@example.com</a>
							</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 footer-grid-w3ls">
					<div class="footer-title">
						<h3>友情链接</h3>
					</div>
					<ul class="links">
						<li>
							<a href="index.jsp">主页</a>
						</li>
						<li>
							<a href="about.jsp">关于我们</a>
						</li>
						
						<li>
							<a href="shop.jsp">店</a>
						</li>
						<li>
							<a href="contact.jsp">联系我们</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-3 footer-grid-w3ls">
					<div class="footer-title">
						<h3>注册享受优惠</h3>
					</div>
					<div class="footer-text">
						<p>订阅我们的邮件列表，您将始终获得我们的最新消息和更新。.</p>
						<form action="#" method="post">
							<input class="form-control" type="email" name="Email" placeholder="请输入您的邮箱..." required="">
							<button class="btn1">
								<i class="far fa-envelope" aria-hidden="true"></i>
							</button>
							<div class="clearfix"> </div>
						</form>
					</div>
				</div>
			</div>
			<div class="copyright-w3layouts mt-4">
				<p class="copy-right text-center ">&copy; 2018 眼镜商城. 保留所有权利 | 由 W3layouts设计 </a>
				</p>
			</div>
		</div>
	</footer>
	<!-- //footer -->
	<!--jQuery-->
	<script src="js/jquery-2.2.3.min.js"></script>
	<!-- 购物车  -->
	<script>
	//发ajax请求得到商品
	var totalprice=0;
	var totalnum=0;
	var tp=0;
	
	$.post("orderServlet",{
		op:'getCart'
	},function(data){
		//开始设值
		var str='';
		var str2='';
		if(data.length>0){
			for( var i=0;i<data.length;i++ ){
				str+='<tr class="rem"><td class="invert">'+(i+1)+'</td><td class="invert-image"><a href="single.jsp">';
				str+='<img src="'+data[i].pics+'" alt=" " class="img-responsive"></a></td><td class="invert">';
				str+='<div class="quantity"><div class="quantity-select"><div class="entry value-minus">';
				str+='<a class="entry value-minus" href="javascript:void(0);" onclick="changeNum(-1,'+data[i].gno+',this)" class="minus fl"></a></div>';
				str+='<div class="entry value" id="num"><span class="nums">'+data[i].num+'</span></div>';
				str+='<div class="entry value-plus active">';
				str+='<a class="entry value-plus active" href="javascript:void(0);" onclick="changeNum(1,'+data[i].gno+',this)" class="add fl"></a></div></div></div></td>';
				str+='<td class="invert" id="name">'+data[i].gname+'</td><td class="invert">$<span class="price">'+data[i].price+'</span></td><td class="invert" style="width:100px;">$<span class="tp">'+data[i].num*data[i].price+'</span></td>';
				str+='<td class="invert"><div class="rem"><div class="close"><a id="delA" href="javascript:void(0)" onclick="del(this,'+data[i].gno+')"</a></div></div></td></tr>';
				//总数量
				totalnum+=parseInt(data[i].num);
				//总价格
				totalprice=parseInt(data[i].num*data[i].price);
				tp+=totalprice;
			}
			str2+='<li>总服务费<i>-</i><span>$55.00</span></li>';
			str2+='<li>总计<i>-</i><span >$<em id="tp">'+(tp+55)+'</em></span></li>';
			$("#product").html(str2);
			$("#nums").html(totalnum);
			$("#goods").html(str);
		}else{
			alert("购物车暂无商品");
			location.href="index.jsp";
		}
		
	},"json");
	
	
	//登录
	function login(){
		//首先得到数据
		var nickname=$("#username").val();
		var pwd=$("#password").val();
		
		if( nickname==null || nickname=="" || pwd==""  || pwd==null ){
			$(".colWarning").html("用户名或密码不能为空");
		}else{
			//发送ajax请求
			$.post("userServlet",{
				op:'login',
				nickname:nickname,
				pwd:pwd
			},function(data){
				if( data<=0 ){
					$(".colWarning").html("用户名或密码错误");
				}else if( data==2 ){
					$(".colWarning").html("您的账号已被封禁，请联系管理员xxxxx@qq.com...");
				}else{
					$(".colWarning").html("登陆成功，页面将自动刷新...");
					//延时器
					setTimeout(function(){
						location.reload();
					},1500);
				}
			},"text");
		}
	}
	</script>
					
						
	<!-- newsletter modal -->
	<!--search jQuery-->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<script src="js/classie-search.js"></script>
	<script src="js/demo1-search.js"></script>
	<!--//search jQuery-->
	<!-- cart-js -->
	<script src="js/minicart.js"></script>
	<script>
		googles.render();

		googles.cart.on('googles_checkout', function (evt) {
			var items, len, i;

			if (this.subtotal() > 0) {
				items = this.items();

				for (i = 0, len = items.length; i < len; i++) {}
			}
		});
	</script>
	<!-- //cart-js -->
	<script>
		$(document).ready(function () {
			$(".button-log a").click(function () {
				$(".overlay-login").fadeToggle(200);
				$(this).toggleClass('btn-open').toggleClass('btn-close');
			});
		});
		$('.overlay-close1').on('click', function () {
			$(".overlay-login").fadeToggle(200);
			$(".button-log a").toggleClass('btn-open').toggleClass('btn-close');
			open = false;
		});
	</script>
	<!-- carousel -->
	<!-- easy-responsive-tabs -->
	<script src="js/easy-responsive-tabs.js"></script>
	<script>
		$(document).ready(function () {
			$('#horizontalTab').easyResponsiveTabs({
				type: 'default', //Types: default, vertical, accordion           
				width: 'auto', //auto or any width like 600px
				fit: true, // 100% fit in a container
				closed: 'accordion', // Start closed if in accordion view
				activate: function (event) { // Callback function if tab is switched
					var $tab = $(this);
					var $info = $('#tabInfo');
					var $name = $('span', $info);
					$name.text($tab.text());
					$info.show();
				}
			});
			$('#verticalTab').easyResponsiveTabs({
				type: 'vertical',
				width: 'auto',
				fit: true
			});
		});
	</script>
	<!--quantity-->
	
	<!-- 购物车加减 -->
	<script>
	//商品数量改变
	function changeNum(num,gno,thas){
		//得到div
			var mydiv = $(thas).parent().parent().parent();
			var mytr=$(thas).parent().parent().parent().parent().parent();
		//得到原先的数量
		var oldnum=parseInt(mydiv.find(".nums").html());
		var num=parseInt(num);
		if( oldnum + num < 1 ){
			oldnum=1;
			return;
		}else{
			oldnum += num;
		}
		
		//改变值 并发ajax请求
		$.post("orderServlet",{
			op:'changeGoodsNum',
			gno:gno,
			oldnum:oldnum
		},function(data){
			if( data>0 ){
				//数值发生改变
				//改变数量
				mydiv.find(".nums").html(oldnum);
				//改变小计
				mytr.find(".invert .tp").html(oldnum*parseInt(mytr.find(".invert .price").html()));
				console.log(parseInt( $("#tp").html() )+"----num:"+num+"----单价:"+parseInt( mytr.find(".price").html() ));
				$("#tp").html( parseInt( $("#tp").html() ) + num * parseInt( mytr.find(".price").html() ) );
			}
		},"text");
		
	}
	
	</script>
	<!--quantity-->
	<!--close 删除商品-->
	<script>
	//删除
	function del(thas,gno){
		//删除这一行
		document.getElementById("goods").removeChild( thas.parentNode.parentNode.parentNode.parentNode );
		//先得到这一行的tr
		var mytr=$(thas).parent().parent().parent().parent();
		
		//发ajax请求
		$.post("orderServlet",{
			op:'delGoods',
			gno:gno
		},function(data){
			if( data>0 ){
				//数值发生改变
				$("#tp").html( $("#tp").html() - parseInt(mytr.find(".price").html()) );
				$("#tn").html( $("#tn").html() - parseInt(mytr.find(".nums").val()) );
				$(".total_count b").html( $(".total_count b").html() -1 );
			}
		},"text");
		
	}
	</script>
	
	<!--//close-->

	<!-- dropdown nav -->
	<script>
		$(document).ready(function () {
			$(".dropdown").hover(
				function () {
					$('.dropdown-menu', this).stop(true, true).slideDown("fast");
					$(this).toggleClass('open');
				},
				function () {
					$('.dropdown-menu', this).stop(true, true).slideUp("fast");
					$(this).toggleClass('open');
				}
			);
		});
	</script>
	<!-- //dropdown nav -->
	<script src="js/move-top.js"></script>
    <script src="js/easing.js"></script>
    <script>
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 900);
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            /*
            						var defaults = {
            							  containerID: 'toTop', // fading element id
            							containerHoverID: 'toTopHover', // fading element hover id
            							scrollSpeed: 1200,
            							easingType: 'linear' 
            						 };
            						*/

            $().UItoTop({
                easingType: 'easeOutQuart'
            });

        });
    </script>
    <!--// end-smoth-scrolling -->


	<script src="js/bootstrap.js"></script>
	<!-- js file -->
</body>

</html>